<!DOCTYPE html>
<html>
	<head>
		 {% load staticfiles %}
		<meta charset="utf-8">
		<title>index</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- <link rel="stylesheet" type="text/css" href="css/index.css"/> -->
		<link rel="stylesheet" type="text/css" href="{% static 'News/css/container.css'%}" />
		<link rel="stylesheet" type="text/css" href="{% static 'News/css/icon.css'%}" />
		<!-- 引入组件库 -->
		<script src="{% static '/News/js/vue.js'%}" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- <script src="js/index.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header height="100px">
					<el-row>
						<el-col :span="8">
							<div class="grid-content bg-purple">
								<img src="{% static '/News/image/logo1.png'%}">
							</div>
						</el-col>

						<el-col :span="16">
							<div class="grid-content bg-purple-light" style="float: right;">
								<i class="el-icon-user-solid icon"></i>
								<span style="color: #FFFFFF;">河北省财政厅</span>
								<i class="el-icon-s-tools icon"></i>
								<i class="el-icon-menu icon"></i>
							</div>
						</el-col>
					</el-row>

				</el-header>
				<el-container>
					<el-aside width="200px">
						<el-row class="tac">
							<el-col :span="24">
								<!-- <h5>自定义颜色</h5> -->
								<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
								 background-color="#303133" text-color="#fff" active-text-color="#409EFF">

									<el-menu-item index="1">
										<i class="el-icon-s-home nav_icon" style="color: #FFFFFF; "></i>
										<span slot="title" class="nav_font">监控总览</span>
									</el-menu-item>

									<el-menu-item index="2">
										<i class="el-icon-aim nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">全景舆情</span>
									</el-menu-item>

									<el-menu-item index="3">
										<i class="el-icon-mobile-phone nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">两微一端</span>
									</el-menu-item>

									<el-menu-item index="4">
										<i class="el-icon-zoom-in nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">专题监测</span>
									</el-menu-item>

									<el-menu-item index="5">
										<i class="el-icon-message-solid nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">舆情预警</span>
									</el-menu-item>

									<el-menu-item index="6">
										<i class="el-icon-data-line nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">统计分析</span>
									</el-menu-item>

									<el-menu-item index="7">
										<i class="el-icon-location nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">地域舆情</span>
									</el-menu-item>

									<el-menu-item index="8">
										<i class="el-icon-collection nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">舆情报告</span>
									</el-menu-item>

									<el-menu-item index="9">
										<i class="el-icon-reading nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">我的报纸</span>
									</el-menu-item>

									<el-menu-item index="10">
										<i class="el-icon-star-off nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">重点关注</span>
									</el-menu-item>

									<el-menu-item index="11">
										<i class="el-icon-search nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">在线搜索</span>
									</el-menu-item>

								</el-menu>
							</el-col>
						</el-row>
					</el-aside>
					<el-container>
						<el-main>
							<el-row>
								<el-col :span="12">
									<div class="grid-content bg-purple">
										<span style="float: left;font-size: 20px;color: #1f96d2;line-height: 50px;">全景舆情</span>
									</div>
								</el-col>
								<el-col :span="12">
									<div id="search_option" class="grid-content bg-purple-light">
										<div style="margin-top: 5px;">
											<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
												<el-select v-model="select" slot="prepend" placeholder="请选择">
													<el-option label="全文搜索" value="1"></el-option>
													<el-option label="标题搜索" value="2"></el-option>
													<el-option label="来源搜索" value="3"></el-option>
													<el-option label="作者搜索" value="4"></el-option>
												</el-select>
												<el-button slot="append" @click="" icon="el-icon-search"></el-button>
											</el-input>
										</div>
									</div>
								</el-col>
							</el-row>

							<div id="filter_info">

								<form action="/News/index/" method="get">
									<table cellspacing="10px" cellpadding="" width="80%">

										<tr>
											<td>
												媒体类型
											</td>
											<td>
												<input type="radio" name="source" id="source_all" value="0" /><label for="source_all">全部</label>
											</td>
											<td>
												<input type="radio" name="source" id="weibo" value="1" /><label for="weibo">微博</label>
											</td>
											<td>
												<input type="radio" name="source" id="weixin" value="2" /><label for="weixin">微信</label>
											</td>
											<td>
												<input type="radio" name="source" id="zhihu" value="3" /><label for="zhihu">知乎</label>
											</td>
											<td>
												<input type="radio" name="source" id="xinwen" value="4" /><label for="xinwen">新闻</label>
											</td>
										</tr>
										<tr>
											<td>文本倾向</td>
											<td>
												<input type="radio" name="sentiment" id="sen_all" value="0" /><label for="sen_all">全部</label>

											</td>
											<td>
												<input type="radio" name="sentiment" id="positive" value="1" /><label for="positive">正面</label>
											</td>
											<td>
												<input type="radio" name="sentiment" id="neutral" value="2" /><label for="neutral">中性</label>
											</td>
											<td>
												<input type="radio" name="sentiment" id="negative" value="3" /><label for="negative">负面</label>
											</td>
										</tr>
										<tr>
											<td>起止时间</td>
											<td>
												<input type="radio" name="time" id="time_all" value="0" /><label for="time_all">全部</label>

											</td>
											<td>
												<input type="radio" name="time" id="today" value="1" /><label for="today">今天</label>
											</td>
											<td>
												<input type="radio" name="time" id="week" value="2" /><label for="week">近7天</label>
											</td>
											<td>
												<input type="radio" name="time" id="month" value="3" /><label for="month">近30天</label>
											</td>
											<td>
												<input type="text" name="" id="topic" value="" hidden="" />
											</td>
										</tr>
										<tr>
											<td colspan="5"><input type="submit" value="查询" /> </td>
										</tr>
									</table>
								</form>

							</div>
							<div id="info_list">
								<table border="" cellspacing="" cellpadding="" width="100%">
									<tr width="100%">
										<td width="60%">舆情消息</td>
										<td width="15%">来源</td>
										<td width="10%">媒体类型</td>
										<td width="15%">时间</td>
									</tr>
									<!-- 例子 -->
									{% for article in articles %}
									<tr>
										<td>
											<h4 style="margin-left:40px;text-align: left;"><a href={{article.url}}>{{article.title}}</a></h4>
											<p style="margin-left:40px;text-align: left;">{{article.abstract}}</p>
											<div style="clear: both;"></div>
											<ul>
												<li style="padding-left: 0px;">主题词：<span>{{article.top_word}}</span></li>
												<div style="clear: both;"></div>
												<li style="">
													<el-row>
														<el-button type="primary" icon="el-icon-star-off" size="small" circle></el-button>
														<el-button type="primary" icon="el-icon-delete" size="small" circle></el-button>
														<el-button type="primary" icon="el-icon-bell" size="small" circle></el-button>
														<el-button type="primary" icon="el-icon-message" size="small" circle></el-button>
														<el-button type="primary" icon="el-icon-share" size="small" circle></el-button>

													</el-row>
												</li>
											</ul>
										</td>
										<td>
											{{article.author}}
										</td>
										<td>
											{{article.website}}
										</td>
										<td>
											{{article.pub_time}}
										</td>
									</tr>
									{% endfor %}



									<!-- 例子 -->
								</table>
							</div>
						</el-main>
						<!-- <el-footer>Footer</el-footer> -->
					</el-container>
					<el-aside width="250px">
						<div id="topic">
							<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
							 background-color="#303133" text-color="#fff" active-text-color="#409EFF">
								<el-submenu index="1">
									<template slot="title">
										<i class="el-icon-notebook-1 nav_icon" style="color: #FFFFFF;"></i>
										<span slot="title" class="nav_font">监测专题</span>
									</template>
									<el-menu-item-group>
										<template slot="title"></template>
										<el-menu-item index="1-1"><span @click="deliver">河北 财政 河北财政厅</span></el-menu-item>
										<el-menu-item index="1-2">中国男篮 夏季联赛</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
							</el-menu>
						</div>

					</el-aside>
				</el-container>
			</el-container>
		</div>

		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			var Main = {
				data() {
					return {
						input1: '',
						input2: '',
						input3: '',
						select: '',
					}
				}
			}
			var Ctor = Vue.extend(Main)
			var app = new Ctor().$mount('#app')
			// --------------------------------------------------------
			var a = new Vue({
				el: "#topic",
				data: {},
				methods: {
					handleOpen(key, keyPath) {
						console.log(key, keyPath);
					},
					handleClose(key, keyPath) {
						console.log(key, keyPath);
					},
					deliver() {
						alert(111111111);
					}
				}
			})
		</script>
		<!-- <script type="text/javascript">
			new Vue().$mount('#app')
		</script> -->

	</body>
</html>
